<template>
	<view class="news">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="消息"></tab-top>
		<!-- #endif -->
		<view class="content">
			<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit"
			 @emptyclick="emptyClick" @topclick="topClick">
				<view class="list" v-if="have == '1'">
					<view class="item " v-for="(item, index ) in list" :key="index" @tap="goDetile(item,index)">
						<view class="text1">
							{{item.title}}
							<view v-if="item.is_read == '1'" class="text1_message"></view>
						</view>
						<view class="text2">{{item.content}}</view>
						<view class="text3">{{item.create_time.format_time}}</view>
					</view>

				</view>
				<view v-if="have == '0'" style="width: 100%;height: 30vh;" class="show">
					<image style="position:absolute;left: 0;right: 0;bottom: 0;margin: 0 auto; width:80upx;height: 80upx;" class="load_img"
					 src="/static/icon/loading.png" mode=""></image>
				</view>
				<view v-if="have == '-1'" class="show">
					<view class="show_null">
						<image src="/static/bg/null.png" mode=""></image>
					</view>
					<view class="title">暂无新消息哦！</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	let page = 1;
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				key: "",
				list: [],
				have: '0',
				mescroll: null, //mescroll实例对象
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
					offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '正在刷新...' // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '没有更多数据了', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: 'http://www.mescroll.com/img/mescroll-totop.png', // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300 // 回到顶部的动画时长,默认300ms
					},
					empty: {
						use: true, // 是否显示空布局
						icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
						top: '35%', // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
						zIndex: 99 // fixed定位z-index值
					}
				}
			}
		},
		onUnload() {
			this.mescroll = null;
		},
		onReachBottom() {
			console.log(123);
			this.mescroll && this.mescroll.onReachBottom();
		},
	
		methods: {
			getList() {
				return new Promise(res => {
					this.req({
						url: 'api/allMessage',
						method: 'get',
						data: {
							receiver: this.isLogin().id,
							page:page,
							limit:30
						}
					}, (data) => {
						res(data.data);
					}, (data) => {

					})
				});
			},
			async initialization() {
				page = 1;
				let res = await this.getList();


				if (res.status == 1) {

					this.list = res.data.list;
					this.have = '1';

				} else {
					this.have = '-1';
				}
			},
			async goDetile(item,index) {
				/**
				 * 更新状态成功 刷新界面数据
				 */
				let res = await this.messageUpdate(item.id);
				if(res.status == 1){
					this.list[index].is_read = 0;
				}
				



				switch (item.type) {
					
					case 'order':
						if( item.action == 'cancle_show'){
							return;
						}
						if(this.isLogin().type=='1'){
							uni.navigateTo({
								url: '/pages/cleaner/order/order-detile?id=' + item.resource_id
							});
						}else{
							uni.navigateTo({
								url: '/pages/hotel/myorder/particulars?id=' + item.resource_id
							});
						}
						
						break;
					default:
						break;
				}
			},
			/**
			 * 消息状态更新
			 */
			messageUpdate(id) {
				return new Promise((res) => {
					this.req({
						url: 'api/allMessage',
						id: id,
						method: 'PUT',
						data: {
							is_read: '0'
						}
					}, (data) => {
						res(data.data);
					}, (data) => {
						res(data.data);
					})
				});
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				console.log('下拉刷新');
				mescroll.resetUpScroll();
				this.initialization();
				setTimeout(() => {
					mescroll.endSuccess(10);
				}, 500);
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				page ++;
				(async ()=>{
					let res = await this.getList();
					if (res.status == 1) {
					
						this.list = this.list.concat(res.data.list);
						// if(res.data.list<30){
						// 	
						// }
						mescroll.endSuccess(res.data.list.length);
					
					} else {
						mescroll.endSuccess(10);
					}
				})();
				
				// console.log('上拉回调');
				// setTimeout(()=>{
				// 	mescroll.endSuccess(10);
				// },1500);
			},
			// 点击空布局按钮的回调
			emptyClick() {
				console.log('点击了按钮');
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log('点击了回到顶部按钮');
			}
		},
		onLoad() {

		},
		onShow() {
			this.have = '0';
			this.initialization();
		},
		mounted() {

		},
		computed: {

		}
	}
</script>

<style lang="scss" scoped>
	.news {
		.content {
			.list {
				.item:after {
					position: absolute;
					width: calc(100% - 48upx);
					background: #e5e5e5;
					height: 1upx;
					left: 24upx;
					bottom: 0;
					transform: scaleY(0.5);
					content: '';
				}

				.item {
					box-sizing: border-box;
					padding: 40upx 24upx 30upx 24upx;
					position: relative;

					.text1 {
						font-size: 28upx;
						line-height: 1;
						color: #333333;
						position: relative;
						float: left;

						.text1_message {
							width: 8upx;
							height: 8upx;
							background-color: #f93735;
							position: absolute;
							right: -4upx;
							top: -4upx;
							border-radius: 50%;
						}
					}

					.text2 {
						margin-top: 50upx;
						line-height: 36upx;
						font-size: 24upx;
						color: #999999;
					}

					.text3 {
						position: absolute;
						right: 24upx;
						top: 56upx;
						line-height: 1;
						font-size: 24upx;
						color: #999999;
					}
				}
			}
		}
	}

	.show {
		position: relative;

		.show_null {
			margin-top: 190upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 345upx;
				height: 310upx;
			}
		}

		.title {
			position: absolute;
			width: 100%;
			top: 220upx;
			left: 0;
			text-align: center;
			font-size: 32upx;
		}
	}

	.load_img {
		-webkit-animation: myfirst 1.5s linear infinite;
	}

	@keyframes myfirst {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(360deg)
		}
	}
</style>
